<template>
	<div style="display: flex;justify-content: space-between;">
		<h3>班级管理</h3>
		<h3>当前状态:{{data.actmsg}}</h3>
		<h3>
			<button @click="go2Add()">添加新班级</button>
		</h3>
		
	</div>
	<div style="display: flex;">
		<div style="width: 70%;border: 1px solid blue;">
			<table border="1" style="width: 95%;">
				<tr v-for="(x,idx) in data.clzs">
					<td>{{x.clzno}}</td>
					<td>{{x.clzname}}</td>
					<td><button @click="go2Update(x.clzno)">修改</button></td>
					<td><button @click="del(x)">删除</button></td>
				</tr>
			</table>
		</div>
		<div style="width: 30%;border: 1px solid blue;">
			<p>班级编号:<input type="text" v-model="data.clz.clzno" v-bind:readonly="data.actclz!=0"></p>
			<hr>
			<p>班级名称:<input type="text" v-model="data.clz.clzname"></p>
			<hr>
			<button v-if="data.actclz==0" @click="Add()">添加</button>
			<button v-if="data.actclz==1" @click="Update()">修改</button>
		</div>
	</div>
</template>

<script setup>
	import {ref,reactive,onMounted} from 'vue'
		import {$get,$postx,$postf} from "../../ajax/index.js"
		import myalert from "../../utils/myalert.js"
	
	
	const data = reactive({
		clzs:[],
		clz: {},
		actmsg: '显示', 
		actclz: 2, //0 添加  1 修改 ，2默认显示状态
	})
	
	onMounted(()=>{
		$get("/api/adm/clz/findAll")
		.then((resp)=>{
			console.log(resp.data.data)
			data.clzs = resp.data.data;
		})
	})
	
	function go2Add(){
		console.log("add")
		data.actclz = 0; // 当前的状态的下标 添加
		data.actmsg = '添加';
		data.clz={
			clzno:''
		}//定义一个对象 和 表绑定
	}
	function Add(){
		console.log(data.clz)
		$postx("/api/adm/clz/add",data.clz)
		.then((resp)=>{
			data.clzs = resp.data.data;
			data.clz = "";
		})
	}
	function go2Update(clzno){
		console.log("update")
		data.actclz = 1; // 当前的状态的下标 修改
		data.actmsg = '修改';
		$get("/api/adm/clz/findOne/"+clzno)
		.then((resp)=>{
			data.clz = resp.data.data;
		})
	}
	function Update(){
		console.log(data.clz)
		$postx("/api/adm/clz/update",data.clz)
		.then((resp)=>{
			console.log(resp.data.data)
			data.clzs = resp.data.data
		})
	}
	function del(x){
		$get("/api/adm/clz/del",x)
		.then((resp)=>{
			data.clzs = resp.data.data
		})
	}
</script>



<style>
</style>
